<template>
  <div>
    <!--楼梯3f 把这个做成一个组件，使其在index中可以复用-->
<div class="floor" id="f3">
  <div class="floor_top">
    <img src="http://www.codeboy.com:9999/img/index/computer_icon.png" alt=""/>
    {{title}}
  </div>
  <div class="floor_content">
    <div class="food">
      <div class="desc">
        <p class="name">{{items[0].title}}</p>
        <p class="details">{{items[0].details}}</p>
        <p class="price">￥{{items[0].price}}</p>
        <div id="one" class="view">查看详情</div>
      </div>
      <img :src="baseURL+items[0].pic" alt=""/>
    </div>
    <div class="food">
      <div class="desc">
        <p class="name">{{items[1].title}}</p>
        <p class="details">{{items[1].details}}</p>
        <p class="price">￥{{items[1].price}}</p>
        <div id="two" class="view">查看详情</div>
      </div>
      <img :src="baseURL+items[1].pic" alt=""/>
    </div>
    <div class="food">
      <div class="desc">
        <p class="name">{{items[2].title}}</p>
        <p class="price">￥{{items[2].price}}</p>
        <div id="three" class="view">查看详情</div>
      </div>
      <img :src="baseURL+items[2].pic" alt=""/>
    </div>
    <div class="product ">
      <img :src="baseURL+items[3].pic" alt=""/>
      <h2>{{items[3].title}}</h2>
      <p>￥{{items[3].price}}</p>
      <a id="four">查看详情</a>
    </div>
    <div class="product ">
      <img :src="baseURL+items[4].pic" alt=""/>
      <h2>{{items[4].title}}</h2>
      <p>￥{{items[4].price}}</p>
      <a id="five">查看详情</a>
    </div>
    <div class="product ">
      <img :src="baseURL+items[5].pic" alt=""/>
      <h2>{{items[5].title}}</h2>
      <p>￥{{items[5].price}}</p>
      <a id="fix">查看详情</a>
    </div>
  </div>
</div>
  </div>
</template>

<script>
export default {
  props:['title','items'],
  data() {
    return {
      // 域名前缀存变量
      baseURL: 'http://www.codeboy.com:9999/'
    }
  },
};
</script>

<style lang="scss" scoped>
//@import方式是全局引入,影响所有的组件
// 而我们要引入的item_cat.css 只影响当前组件,所以要引用局部引入方式
// scoped:对@import没有影响,只影响普通的引入操作,代表只在当前组件有效
</style>
<style scoped src="../assets/css/item_cat.css"></style>